<!DOCTYPE html>
<html>
<head>
    <title>EaselJS: Simple Graphics</title>
	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script type="text/javascript">

        var canvas, stage, img, w, h;

        function init() {
        	if (window.top != window) {
        		document.getElementById("header").style.display = "none";
        	}

            canvas = document.getElementById("testCanvas");
            // create a new stage and point it at our canvas:
            stage = new createjs.Stage(canvas);

            // grab canvas width and height for later calculations:
            w = canvas.width;
            h = canvas.height;
            img = new Image();
            img.onload = layout;
            img.src = "./assets/daisy.png";
        }

        function layout() {
            var arr = [createStar, createHex, createLineTo, createRadialGradientFill, createEllipse, createRectGradientFill, createBitmapFill];
            var padding = 5;
            var _width = 155;
            var _height = 155;
            var cols = 4;
            var space = 0;
            var l = arr.length;

            var border = createBorder();

            for(var i=0;i<l;i++) {
                var tile = arr[i]();
                tile.x = 42+(_width + padding) *(i%cols);
                tile.y = 42+(i/cols | 0) * (_height+padding);
                stage.addChild(tile);
            }
            stage.addChild(border);
            stage.update();
        }

        function createBorder() {
            var container = new createjs.Container();
            var s = new createjs.Shape();
            s.graphics.beginBitmapStroke(img).setStrokeStyle(32).drawRect(20,20,920,360);
            container.addChild(s);
            return container;
        }

        function createBitmapFill() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.beginBitmapFill(img).setStrokeStyle(8).beginRadialGradientStroke(["#FFF","#000"],[0,1],0,0,0,0,30,130).drawRect(0, 0, 130, 130);
            s.x = 12;
            s.y = 10;
            container.addChild(s);
            return container;
        }

        function createRectGradientFill() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.beginLinearGradientFill(["#FFF","#000"],[0,1],0,0,0,130).drawRect(0,0,130,130);
            s.x = 12;
            s.y = 10;
            container.addChild(s);
            return container;
        }

        function createEllipse() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.f(createjs.Graphics.getRGB(0,0x66,0x99,0.5)).setStrokeStyle(4).beginLinearGradientStroke(["#F00","#000"],[0,1],0,0,70,140).drawEllipse(0,0,70,140,8);
            s.x = 40;
            s.y = 10;
            container.addChild(s);
            return container;
        }

        function createRadialGradientFill() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.ss(8).beginStroke("#f0f").beginRadialGradientFill(["#FFF","#0FF"],[0,1],0,0,0,0,0,40).drawCircle(0,0,40);
            s.x = s.y = 80;
            container.addChild(s);
            return container;
        }

        function createLineTo() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.setStrokeStyle(16, "round", "round").beginStroke("#f90").moveTo(20,10).lineTo(90,90).lineTo(90,140);
            container.addChild(s);
            return container;
        }

        function createHex() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.beginFill("#0F0").drawPolyStar(0,0,40,6).drawPolyStar(0,75,40,6);
            s.x = 80
            s.y = 40;

            container.addChild(s);
            return container;
        }

        function createStar() {
            var container = createTile();
            var s = new createjs.Shape();
            s.graphics.setStrokeStyle(1).beginStroke(createjs.Graphics.getRGB(255, 255, 0)).beginFill("#FF0").endStroke().drawPolyStar(0,0,80,5,0.6,-90);
            s.x = 80
            s.y = 85;

            container.addChild(s);
            return container;
        }

        function createTile() {
            var container = new createjs.Container();
            var bg = new createjs.Shape();
            bg.graphics.beginFill('#CCCCCC').drawRect(0, 0, 155, 155).endFill();
            bg.alpha = 0.25;
            container.addChild(bg);
            return container;
        }


    </script>
</head>
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Graphics Test</h1>
	    <p>This demo shows the usage of all of the <b>Graphics</b> APIs.</p>
	</header>

	<div class="canvasHolder">
	    <canvas id="testCanvas" width="960" height="400"></canvas>
	</div>

</body>
</html>